<template>
  <div id="bzzy-center-board">
    <div class="center-board-title">
      各地区核定编制与实有人数
      <el-select v-model="value" @change="changeVal" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div id="centerEchart"></div>
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  name: 'echartsTest',
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      list : [],
      options: [
        {
          value: 'xzbz',
          label: '行政编制'
        },
        {
          value: 'sybz',
          label: '事业编制'
        }
      ],
      value: 'xzbz'
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      this.initData()
    },
    value(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.bzzy.getBzrsByDep({
          dep_code: this.depCode,
          bzlx: this.value
        })
        console.log(res)
        //赋值给变量
        this.list = res
      } catch (error) {
        console.log(error)
      }

      var deps = []
      this.list.forEach((element) => {
        deps.push(element.NAME)
      })
      console.log(deps)

      const option = {
        title: {
          show: true,
          text: '', //主标题文本
          x: '30', //水平安
          y: 'top', //垂直
          textStyle: {
            fontSize: 16,
            fontStyle: 'normal',
            fontWeight: '666',
            color: '#ffffff'
          }
        },
        grid: {
          top: 50,
          left: 50,
          right: 30,
          bottom: 10,
          containLabel: true
        },
        legend: {
          right: '15', // 'center' | 'left' | {number},
          y: '10', // 'center' | 'bottom' | {number}
          padding: [0, 0, 20, 0],
          textStyle: {
            fontSize: 14, //字体大小
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            show: true,
            interval: 0, //此处关键， 设置文本标签全部显示
            rotate: 45, //标签旋转角度，对于长文本标签设置旋转可避免文本重叠
            textStyle: {
              fontSize: 14, //字体大小
              color: '#f0f0f0'
            }
          },
          data: deps
        },
        yAxis: {
          type: 'value',
          show: false,
          name: '',
          nameTextStyle: {
            fontSize: 14, //字体大小
            color: '#ffffff'
          },
          // 分割线
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#3399ff'
            }
          },
          axisLabel: {
            formatter: '{value} ',
            show: false,
            textStyle: {
              fontSize: 14, //字体大小
              color: '#ffffff'
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          // {
          //   name: '编制数',
          //   type: 'bar',
          //   barWidth: '30%',
          //   itemStyle: {
          //     normal: {
          //       color: '#69c0ff',
          //       barBorderRadius: [9, 9, 0, 0]
          //     }
          //   },
          //   label: {
          //     normal: {
          //       show: true,
          //       rotate: 45,
          //       fontWeight: 'bold',
          //       color: '#fff',
          //       position: 'top'
          //     }
          //   },
          //   data: this.list.map((item) => {
          //     return {
          //       name: item.NAME,
          //       value: item.BZ + item.DFP
          //     }
          //   })
          // },
          {
            name: '待分配',
            type: 'bar',
            barWidth: '30%',
            stack: '编制总量',
            itemStyle: {
              normal: {
                color: '#3399ff',
                barBorderRadius: [0, 0, 0, 0]
              }
            },
            label: {
              normal: {
                show: false,
                rotate: 45,
                fontWeight: 'bold',
                color: '#fff',
                position: 'top'
              }
            },
            data: this.list.map((item) => {
              return {
                name: item.NAME,
                value: item.DFP
              }
            })
          },
          {
            name: '编制数',
            type: 'bar',
            barWidth: '30%',
            stack: '编制总量',
            itemStyle: {
              normal: {
                color: '#1890ff',
                barBorderRadius: [9, 9, 0, 0]
              }
            },
            label: {
              normal: {
                show: true,
                rotate: 45,
                fontWeight: 'bold',
                color: '#fff',
                position: 'top'
              }
            },
            data: this.list.map((item) => {
              return {
                name: item.NAME,
                value: item.BZ
              }
            })
          },
          {
            name: '实有人数',
            type: 'bar',
            barWidth: '30%',
            itemStyle: {
              normal: {
                color: '#fac46e',
                barBorderRadius: [9, 9, 0, 0]
              }
            },
            label: {
              normal: {
                show: true,
                rotate: 45,
                fontWeight: 'bold',
                color: '#fff',
                position: 'top'
              }
            },
            data: this.list.map((item) => {
              return {
                name: item.NAME,
                value: item.RS
              }
            })
          }
        ]
      }
      this.myEchart = this.$echarts.init(
        document.getElementById('centerEchart')
      )
      this.myEchart.setOption(option)
      window.addEventListener('resize', () => this.myEchart.resize(), false)
    }
  }
}
</script>

<style lang="scss">
#bzzy-center-board {
  width: calc(60% - 30px);
  box-sizing: border-box;
  height: 100%;
  background-color: rgba(1, 35, 102, 0.8);
  //background-color: #012366;
  border-radius: 20px;
  overflow: hidden;
  margin-left: 15px;
  margin-right: 15px;
  display: flex;
  flex-direction: column;

  .center-board-title {
    border-bottom: #336699 1px solid;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;

    .el-select {
      width: 160px;
      margin-left: 30px;
      .el-input--suffix {
        > input {
          background-color: #133596;
          color: #83a8f4;
          border: 1px solid #83a8f4;
          border-radius: 16px;
          height: 32px;
        }
        .el-select__caret {
          font-size: 14px;
        }
        .el-input__icon {
          line-height: 32px;
        }
      }
    }
  }
}
#centerEchart {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>
